import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

// 1、Opacity 透明度处理

//void main(){
//  runApp(new OpacityDemo());
//}


class OpacityDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("Opacity使用案例"),
          centerTitle: true,
        ),
        body: new Center(
          child: new Opacity(
              opacity: 0.3,
              child: new Container(
                width: 250.0,
                height: 100.0,
                decoration: new BoxDecoration(
                  //背景色设置为纯黑
                  color: Colors.black
                ),
                child: Text(
                  "不透明度为0.3",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 28.0
                  ),
                ),
              ),
          ),
        ),
      ),
    );
  }

}

// 2、DecoratedBox（装饰盒子）

//void main(){
//  runApp(new DecoratedBoxBackougDemo());
//}


//背景图效果
class DecoratedBoxBackougDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("DecoratedBox（装饰盒子）"),
          centerTitle: true,
        ),
        body: new Center(
          child: Container(
            width: 300.0,
            height: 300.0,
            decoration: new BoxDecoration(
              color: Colors.grey,
              image: DecorationImage(
                  image: ExactAssetImage("images/timg.jpg"),
                  //填充类型
                  fit: BoxFit.cover
              )
            ),
          ),
        ),
      ),
    );
  }

}

//void main(){
//  runApp(new DecoratedBoxBorderDemo());
//}


//边框圆角处理
class DecoratedBoxBorderDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("边框圆角处理"),
          centerTitle: true,
        ),
        body: new Center(
          child: new Container(
            width: 300.0,
            height: 300.0,
            decoration: new BoxDecoration(
              color: Colors.white,
              border: Border.all(color: Colors.grey,width: 2.0),
              borderRadius: BorderRadius.circular(30.0),
              image: DecorationImage(
                  image: ExactAssetImage("images/timg.jpg"),
                  fit: BoxFit.cover
              )
            ),
          ),
        ),
      ),
    );
  }

}


//void main(){
//  runApp(new BoxShadowDemo());
//}


//边框阴影处理
class BoxShadowDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("边框阴影处理"),
          centerTitle: true,
        ),
        body: new Center(
          child: new Container(
            width: 300.0,
            height: 300.0,
            decoration: new BoxDecoration(
              color: Colors.white,
              //边框阴影效果
              boxShadow: <BoxShadow>[
                new BoxShadow(
                  //阴影颜色
                  color: Colors.grey,
                  //模糊值
                  blurRadius: 8.0,
                  //扩展阴影半径
                  spreadRadius: 8.0,
                  // x 和 y 方向的偏移量
                  offset: Offset(-1.0, 1.0),
                )
              ]
            ),
            child: Text(
              "阴影效果",
              style: TextStyle(
                color: Colors.black,
                fontSize: 28.0
              ),
            ),
          ),
        ),
      ),
    );
  }

}

//void main(){
//  runApp(new LinearGradientDemo());
//}


//线性渐变处理处理
class LinearGradientDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("线性渐变处理处理"),
          centerTitle: true,
        ),
        body: new Center(
          child: new DecoratedBox(
              decoration: new BoxDecoration(
                gradient: new LinearGradient(
                    //起始偏移量
                    begin: const FractionalOffset(0.5, 0.0),
                    //终止偏移量
                    end: const FractionalOffset(1.0, 1.0),
                    //渐变颜色数据集
                    colors: <Color>[
                      Colors.red,
                      Colors.orange,
                      Colors.blue,
                      Colors.grey
                    ]
                )
              ),
            child: new Container(
              width: 280.0,
              height: 280.0,
              child: new Center(
                child: Text(
                    "线性渐变处理处理",
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: 28.0,
                    ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

}

//void main(){
//  runApp(new RadialGradientDemo());
//}


//环形渐变处理处理
class RadialGradientDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("环形渐变处理处理"),
          centerTitle: true,
        ),
        body: new Center(
          child: new DecoratedBox(
              decoration: new BoxDecoration(
                gradient: RadialGradient(
                    // 中心点偏移量,x和y均为0.0表示在正中心位置
                    center: const Alignment(0.0, 0.0),
                    //圆形半径
                    radius: 0.50,
                    //渐变颜色集
                    colors: <Color>[
                      Colors.red,
                      Colors.grey,
                      Colors.orange,
                      Colors.blue
                    ]
                )
              ),
            child: new Container(
              width: 280.0,
              height: 280.0,
              child: new Center(
                child: new Center(
                  child: Text(
                    "环形渐变处理处理",
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: 28.0,
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

}

//3、RotatedBox（旋转盒子）

//void main(){
//  runApp(new RotatedBoxDemo());
//}


class RotatedBoxDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text(""),
          centerTitle: true,
        ),
        body: Center(
          child: RotatedBox(
              //旋转次数：旋转一次，90度
              quarterTurns: 3,
              child: Text(
                "RotatedBox（旋转盒子）",
                style: TextStyle(
                  fontSize: 28.0
                ),
              ),
          ),
        ),
      ),
    );
  }

}


//4、Clip（剪裁处理）

//void main(){
//  runApp(new ClipOvalDemo());
//}

//ClipOval：圆形剪裁
class ClipOvalDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("ClipOval：圆形剪裁"),
          centerTitle: true,
        ),
        body: new Center(
          child: new ClipOval(
            child: new SizedBox(
              width: 300.0,
              height: 300.0,
              child: new Image.asset(
                  "images/timg.jpg",
                  fit: BoxFit.fill,
              ),
            ),
          ),
        ),
      ),
    );
  }

}


//void main(){
//  runApp(new ClipRRectDemo());
//}

//ClipRRect：圆角矩形剪裁
class ClipRRectDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("ClipRRect：圆角矩形剪裁"),
          centerTitle: true,
        ),
        body: new Center(
          child: ClipRRect(
            borderRadius: BorderRadius.all(new Radius.circular(30.0)),
            child: new SizedBox(
              width: 300.0,
              height: 300.0,
              child: new Image.asset(
                "images/timg.jpg",
                 fit: BoxFit.fill,
              ),
            ),
          ),
        ),
      ),
    );
  }

}



//void main(){
//  runApp(new ClipRectDemo());
//}

//ClipRect：矩形剪裁
class ClipRectDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("ClipRect：矩形剪裁"),
          centerTitle: true,
        ),
        body: new Center(
          child: new ClipRect(
            clipper: new RectClipper(),
            child: new SizedBox(
              width: 300.0,
              height: 300.0,
              child: new Image.asset(
                  "images/timg.jpg",
                   fit: BoxFit.fill,
              ),
            ),
          ),
        ),
      ),
    );
  }

}

//自定义 clipper，类型为Rect
class RectClipper extends CustomClipper<Rect>{

  //获取裁剪范围
  @override
  Rect getClip(Size size) {
    // TODO: implement getClip
    return new Rect.fromLTRB(100.0, 100.0, size.width - 100.0, size.height - 100.0);
  }

  //是否重新裁剪
  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) {
    // TODO: implement shouldReclip
    return true;
  }

}


//void main(){
//  runApp(new ClipPathDemo());
//}

//ClipPath：路径剪裁
class ClipPathDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("ClipPath：路径剪裁"),
          centerTitle: true,
        ),
        body: new Center(
          child: ClipPath(
            clipper: new TnangleClipper(),
            child: new SizedBox(
              width: 300.0,
              height: 300.0,
              child: new Image.asset(
                  "images/timg.jpg",
                  fit: BoxFit.fill,
              ),
            ),
          ),
        ),
      ),
    );
  }

}

//自定义三角形clipper，类型为path
class TnangleClipper extends CustomClipper<Path>{

  //获取裁剪范围
  @override
  Path getClip(Size size) {
    Path path = new Path();
    //起始点
    path.moveTo(50.0, 50.0);
    //终止点
    path.lineTo(50.0, 10.0);
    path.lineTo(100.0, 50.0);
    path.close();
    return path;
  }

  //是否重新裁剪
  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }

}

//5、综合实例

//实例化一支画笔

//void main(){
//  Paint paint = Paint();
//  //画笔颜色
//  paint.color = Colors.green;
//  //画笔笔触类型
//  paint.strokeCap = StrokeCap.round;
//  //是否启动抗锯齿
//  paint.isAntiAlias = true;
//  //颜色混合模式
//  paint.blendMode = BlendMode.exclusion;
//  //绘画风格，默认填充
//  paint.style = PaintingStyle.fill;
//  //颜色渲染模式
//  paint.colorFilter = ColorFilter.mode(Colors.blueAccent, BlendMode.exclusion);
//  //模糊遮罩效果
//  paint.maskFilter = MaskFilter.blur(BlurStyle.inner, 3.0);
//  //颜色渲染模式的质量
//  paint.filterQuality = FilterQuality.high;
//  //画笔的宽度
//  paint.strokeWidth = 16.0;
//}



// 绘制直线

//void main(){
//  runApp(new DrawlineDemo());
//}

class DrawlineDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("绘制直线"),
          centerTitle: true,
        ),
        body: Container(
          child: Center(
            child: SizedBox(
              width: 500.0,
              height: 500.0,
                child: CustomPaint(
                  painter: LinePainter(),
                  child: Center(
                    child: Text(
                      "绘制直线",
                      style: TextStyle(
                          fontSize: 30.0,
                          fontWeight: FontWeight.w600,
                          color: Colors.black
                      ),
                    ),
                  ),
                )
            ),
          )
        ),
      ),
    );
  }

}

// 继承自 CustomPainter 并且实现 CustomPainter 里面的方法
class LinePainter extends CustomPainter{

  //定义画笔
  Paint _paint = new Paint()
    ..color = Colors.black
    ..strokeCap = StrokeCap.square
    ..isAntiAlias = true
    ..strokeWidth = 3.0
    ..style = PaintingStyle.stroke;

//  重写绘制内容方法
  @override
  void paint(Canvas canvas, Size size) {
    //绘制直线
    canvas.drawLine(Offset(20.0, 20.0), Offset(300.0, 20.0), _paint);
  }

  //是否需要重绘
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }

}


// 绘制圆

//void main(){
//  runApp(new DrawCircleDemo());
//}

class DrawCircleDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("绘制圆"),
          centerTitle: true,
        ),
        body: Center(
          child: SizedBox(
            width: 500.0,
            height: 500.0,
            child: new Container(
              color: Colors.blue,
              child: CustomPaint(
                painter: CirclePainter(),
                child: Text(
                  "绘制圆",
                  style: TextStyle(
                    fontSize: 30.0,
                    fontWeight: FontWeight.w600,
                    color: Colors.black
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

}

class CirclePainter extends CustomPainter{

  //定义画笔
  Paint _paint = new Paint()
        ..color = Colors.grey
        ..strokeCap = StrokeCap.square
        ..isAntiAlias = true
        ..strokeWidth = 3.0
        // 没有填充效果
        ..style = PaintingStyle.stroke;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawCircle(Offset(200.0, 150.0), 150.0, _paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }

}


// 绘制椭圆

//void main(){
//  runApp(new DrawOvalDemo());
//}

class DrawOvalDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("绘制椭圆"),
          centerTitle: true,
        ),
        body: new Center(
          child: SizedBox(
            width: 500.0,
            height: 500.0,
            child: CustomPaint(
              painter: OvalPainter(),
              child: Center(
                child: Text(
                    "绘制椭圆",
                    style: TextStyle(
                      fontSize: 38.0,
                      fontWeight: FontWeight.w600,
                      color: Colors.black
                    ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

}

class OvalPainter extends CustomPainter{

  //定义画笔
  Paint _paint = new Paint()
    ..color = Colors.grey
    ..strokeCap = StrokeCap.square
    ..isAntiAlias = true
    ..strokeWidth = 3.0
  // 填充效果
    ..style = PaintingStyle.fill;

  @override
  void paint(Canvas canvas, Size size) {
    // 绘制椭圆
    // 使用一个矩形来确定绘制的范围,椭圆是在这个矩形之中内切的,第一个参数为左上角坐标,第二个参数为右下角坐标
    Rect rect = Rect.fromPoints(Offset(80.0, 200.0), Offset(300.0, 300.0));
    canvas.drawOval(rect, _paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }

}


// 绘制圆角矩形

//void main(){
//  runApp(new RRectDemo());
//}

class RRectDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("绘制圆角矩形"),
          centerTitle: true,
        ),
        body: new Center(
          child: new SizedBox(
            width: 500.0,
            height: 500.0,
            child: Container(
              color: Colors.blue,
              child: CustomPaint(
                painter: RRectPainter(),
                child: new Center(
                  child: Text(
                      "绘制圆角矩形",
                      style: TextStyle(
                        fontSize: 20.0,
                        fontWeight: FontWeight.w600,
                        color: Colors.white
                      ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

}

class RRectPainter extends CustomPainter{

  //定义画笔
  Paint _paint = new Paint()
    ..color = Colors.grey
    ..strokeCap = StrokeCap.square
    ..isAntiAlias = true
    ..strokeWidth = 3.0
  // 没有填充效果
    ..style = PaintingStyle.stroke;

  @override
  void paint(Canvas canvas, Size size) {
    // 中心点坐标为200,200 边长为100
    Rect rect = Rect.fromCircle(center:Offset(100.0,100.0),radius:100.0);
    RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(20.0));
    canvas.drawRRect(rRect, _paint);
    canvas.drawCircle(Offset(100.0,100.0), 100.0, _paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }

}

// 绘制嵌套矩形

//void main(){
//  runApp(new DRectDemo());
//}

class DRectDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("绘制嵌套矩形"),
          centerTitle: true,
        ),
        body: new Center(
          child: new SizedBox(
            width: 500.0,
            height: 500.0,
            child: new CustomPaint(
              painter: new DRectPainter(),
              child: new Center(
                child: Text(
                  "绘制嵌套矩形",
                  style: TextStyle(
                    fontSize: 28.0
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

}



class DRectPainter extends CustomPainter{

  //定义画笔
  Paint _paint = new Paint()
    ..color = Colors.grey
    ..strokeCap = StrokeCap.square
    ..isAntiAlias = true
    ..strokeWidth = 3.0
  // 没有填充效果
    ..style = PaintingStyle.stroke;

  @override
  void paint(Canvas canvas, Size size) {
    Rect rect1 = Rect.fromCircle(center:Offset(150.0,150.0),radius:80.0);
    Rect rect2 = Rect.fromCircle(center:Offset(150.0,150.0),radius:40.0);
    RRect outRect = RRect.fromRectAndRadius(rect1, Radius.circular(20.0));
    RRect inerRect = RRect.fromRectAndRadius(rect2, Radius.circular(20.0));
    canvas.drawDRRect(outRect, inerRect, _paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }

}

// 绘制多个点

//void main(){
//  runApp(new PointDrawerDemo());
//}

class PointDrawerDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("绘制多个点"),
          centerTitle: true,
        ),
        body: new Center(
          child: new SizedBox(
            width: 500.0,
            height: 500.0,
            child: new CustomPaint(
              painter: new PointPainter(),
            ),
          ),
        ),
      ),
    );
  }

}

class PointPainter extends CustomPainter{

  //定义画笔
  Paint _paint = new Paint()
    ..color = Colors.grey
    ..strokeCap = StrokeCap.round
    ..isAntiAlias = true
    ..strokeWidth = 20.0
  // 填充效果
    ..style = PaintingStyle.fill;

  @override
  void paint(Canvas canvas, Size size) {
    //绘制点
    canvas.drawPoints(

      ///PointMode的枚举类型有三个，points点、lines隔点连接线、polygon相邻连接线
//        PointMode.points,
//        PointMode.lines,
        PointMode.polygon,
        [
          Offset(50.0, 60.0),
          Offset(40.0, 90.0),
          Offset(100.0, 100.0),
          Offset(300.0, 350.0),
          Offset(400.0, 80.0),
          Offset(200.0, 200.0),
        ],
        _paint..color = Colors.grey);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }

}

// 绘制圆弧

//void main(){
//  runApp(new DrawerArcDemo());
//}

class DrawerArcDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("绘制圆弧"),
          centerTitle: true,
        ),
        body: new Center(
          child: new SizedBox(
            width: 500.0,
            height: 500.0,
            child: new CustomPaint(
              painter: new ArcPainter(),
            ),
          ),
        ),
      ),
    );
  }

}


class ArcPainter extends CustomPainter{

  //定义画笔
  Paint _paint = new Paint()
    ..color = Colors.grey
    ..strokeCap = StrokeCap.round
    ..isAntiAlias = true
    ..strokeWidth = 3.0
    ..style = PaintingStyle.stroke;

  @override
  void paint(Canvas canvas, Size size) {
    const PI = 3.1415926;
    Rect rect = Rect.fromCircle(center: Offset(100.0, 0.0),radius: 100.0);
    //画 1/2 PI 圆弧
    canvas.drawArc(rect, 0.0, PI / 2, true, _paint);
    Rect rect2 = Rect.fromCircle(center: Offset(200.0, 150.0),radius: 100.0);
    //画  PI 圆弧
    canvas.drawArc(rect2, 0.0, PI, true, _paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }

}

// 绘制路径 path

void main(){
  runApp(new DrawerPathDemo());
}

class DrawerPathDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("绘制路径 path"),
          centerTitle: true,
        ),
        body: new Center(
          child: new SizedBox(
            width: 500.0,
            height: 500.0,
            child: new CustomPaint(
              painter: new PathPainter(),
            ),
          ),
        ),
      ),
    );
  }

}



class PathPainter extends CustomPainter{

  //定义画笔
  Paint _paint = new Paint()
    ..color = Colors.grey
    ..strokeCap = StrokeCap.round
    ..isAntiAlias = true
    ..strokeWidth = 3.0
    ..style = PaintingStyle.stroke;

  @override
  void paint(Canvas canvas, Size size) {
    //新建一个path移动到一个位置，然后画各种线
    Path path = new Path()
      ..moveTo(100.0, 100.0);
    path.lineTo(200.0, 300.0);
    path.lineTo(100.0, 200.0);
    path.lineTo(150.0, 250.0);
    path.lineTo(150.0, 500.0);
    canvas.drawPath(path, _paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }

}
